{% extends "base.html" %}

{% block title %}工具箱 - JSON格式化{% endblock %}

{% block content %}
    <!-- 页面标题 -->
    <div class="bg-purple-600 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold">JSON格式化</h1>
                    <p class="mt-2">美化、验证和分析JSON数据，轻松处理复杂结构</p>
                </div>
                <div class="bg-white bg-opacity-20 p-4 rounded-lg hidden md:block">
                    <div class="flex space-x-2 text-sm">
                        <a href="{{ url_for('main.index') }}" class="hover:underline">首页</a>
                        <span>/</span>
                        <a href="#" class="hover:underline">开发工具</a>
                        <span>/</span>
                        <span class="font-medium">JSON格式化</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 侧边栏工具列表 -->
            <div class="w-full lg:w-1/4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-xl font-bold mb-6 text-gray-800">开发工具</h2>
                    <ul class="space-y-3">
                        <li>
                            <a href="{{ url_for('dev_tools.code_formatter') }}" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-code"></i>
                                </div>
                                <span>代码格式化</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('dev_tools.json_formatter') }}" class="flex items-center text-purple-600 font-medium">
                                <div class="w-8 text-center">
                                    <i class="fas fa-code-branch"></i>
                                </div>
                                <span>JSON格式化</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-search"></i>
                                </div>
                                <span>正则表达式测试</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <span>时间戳转换</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-hdd"></i>
                                </div>
                                <span>编码/解码</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-hashtag"></i>
                                </div>
                                <span>哈希计算</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <!-- 最近使用记录 -->
                <div class="bg-white rounded-lg shadow-md p-6 mt-6">
                    <h2 class="text-xl font-bold mb-4 text-gray-800">最近使用</h2>
                    <ul class="space-y-3">
                        <li>
                            <a href="{{ url_for('dev_tools.json_formatter') }}" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-code-branch text-purple-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>JSON格式化</span>
                                    <p class="text-xs text-gray-500">5分钟前</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('dev_tools.code_formatter') }}" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-code text-purple-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>代码格式化</span>
                                    <p class="text-xs text-gray-500">昨天</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('text_tools.text_case_converter') }}" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-font text-blue-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>文本大小写转换</span>
                                    <p class="text-xs text-gray-500">2天前</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 主工具区域 -->
            <div class="w-full lg:w-3/4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <!-- 工具说明 -->
                    <div class="mb-6">
                        <h2 class="text-xl font-bold text-gray-800 mb-3">JSON格式化</h2>
                        <p class="text-gray-600">
                            格式化、验证并美化您的JSON数据，帮助您分析复杂的JSON结构，识别错误并优化数据展示。
                        </p>
                    </div>
                    
                    <!-- 操作区域 -->
                    <form method="POST" action="{{ url_for('dev_tools.json_formatter') }}">
                        <!-- 输入区域 -->
                        <div class="mb-6">
                            <label class="block text-gray-700 font-medium mb-2">JSON数据</label>
                            <textarea 
                                name="json_input"
                                class="w-full h-64 p-4 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500 font-mono text-sm"
                                placeholder="在此粘贴您的JSON数据..."
                            >{"name":"工具箱","version":"1.0","features":["文本处理","图片处理","开发工具","数据转换"],"settings":{"theme":"light","language":"zh-CN"},"isActive":true,"stats":{"users":1000,"tools":25,"ratings":4.8}}</textarea>
                            <div class="mt-2 flex justify-between text-sm">
                                <span class="text-gray-500">字符数: <span id="char-count">186</span></span>
                                <button type="button" id="clear-input" class="text-purple-600 hover:underline">清空</button>
                            </div>
                        </div>
                        
                        <!-- 格式化选项 -->
                        <div class="mb-6">
                            <div class="bg-gray-100 p-4 rounded-md">
                                <h3 class="font-medium text-gray-800 mb-3">格式化选项</h3>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div>
                                        <label class="block text-gray-700 mb-1 text-sm">缩进大小</label>
                                        <select name="indent_size" class="w-full border border-gray-300 rounded-md p-1 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                                            <option value="2" selected>2 空格</option>
                                            <option value="4">4 空格</option>
                                            <option value="tab">Tab</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-gray-700 mb-1 text-sm">排序键</label>
                                        <select name="sort_keys" class="w-full border border-gray-300 rounded-md p-1 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                                            <option value="none" selected>不排序</option>
                                            <option value="asc">升序（A-Z）</option>
                                            <option value="desc">降序（Z-A）</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-gray-700 mb-1 text-sm">着色主题</label>
                                        <select name="color_theme" class="w-full border border-gray-300 rounded-md p-1 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                                            <option value="default" selected>默认</option>
                                            <option value="dark">暗色</option>
                                            <option value="light">亮色</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="escape_unicode" name="escape_unicode" class="h-4 w-4 text-purple-600">
                                        <label for="escape_unicode" class="ml-2 text-gray-700 text-sm">转义Unicode字符</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" id="wrap_arrays" name="wrap_arrays" class="h-4 w-4 text-purple-600" checked>
                                        <label for="wrap_arrays" class="ml-2 text-gray-700 text-sm">数组元素换行</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" id="trailing_commas" name="trailing_commas" class="h-4 w-4 text-purple-600">
                                        <label for="trailing_commas" class="ml-2 text-gray-700 text-sm">添加尾随逗号</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" id="validate_mode" name="validate_mode" class="h-4 w-4 text-purple-600" checked>
                                        <label for="validate_mode" class="ml-2 text-gray-700 text-sm">开启验证模式</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="mb-6 flex flex-wrap gap-3">
                            <button type="submit" name="action" value="format" class="bg-purple-600 text-white py-2 px-6 rounded-md hover:bg-purple-700 font-medium">
                                格式化JSON
                            </button>
                            <button type="submit" name="action" value="minify" class="bg-gray-200 text-gray-700 py-2 px-6 rounded-md hover:bg-gray-300 font-medium">
                                压缩JSON
                            </button>
                            <button type="button" id="validate-json" class="bg-blue-500 text-white py-2 px-6 rounded-md hover:bg-blue-600 font-medium">
                                验证JSON
                            </button>
                            <button type="button" id="convert-to-yaml" class="bg-gray-200 text-gray-700 py-2 px-6 rounded-md hover:bg-gray-300 font-medium">
                                转换为YAML
                            </button>
                        </div>
                    </form>
                    
                    <!-- 输出区域 -->
                    <div class="mb-6">
                        <div class="flex justify-between mb-2">
                            <label class="block text-gray-700 font-medium">格式化结果</label>
                            <div class="flex space-x-2">
                                <button id="copy-result" class="text-purple-600 hover:underline text-sm flex items-center">
                                    <i class="far fa-copy mr-1"></i> 复制
                                </button>
                                <button id="download-result" class="text-purple-600 hover:underline text-sm flex items-center">
                                    <i class="far fa-file-download mr-1"></i> 下载
                                </button>
                            </div>
                        </div>
                        <div class="w-full h-64 p-4 border border-gray-300 rounded-md bg-gray-50 font-mono text-sm overflow-auto">
                            <pre id="result" class="text-gray-800">{
  "name": "工具箱",
  "version": "1.0",
  "features": [
    "文本处理",
    "图片处理",
    "开发工具",
    "数据转换"
  ],
  "settings": {
    "theme": "light",
    "language": "zh-CN"
  },
  "isActive": true,
  "stats": {
    "users": 1000,
    "tools": 25,
    "ratings": 4.8
  }
}</pre>
                        </div>
                    </div>
                    
                    <!-- JSON路径查询 -->
                    <div class="mb-6 border-t border-gray-200 pt-6">
                        <h3 class="font-bold text-gray-800 mb-3">JSON路径查询</h3>
                        <p class="text-gray-600 mb-4">使用JSONPath表达式快速查找和提取JSON中的特定数据</p>
                        
                        <div class="flex flex-col md:flex-row gap-4 mb-4">
                            <div class="flex-1">
                                <label class="block text-gray-700 text-sm mb-1">JSONPath表达式</label>
                                <input type="text" id="jsonpath-query" 
                                    value="$.stats.users"
                                    class="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-500 focus:border-purple-500" 
                                    placeholder="例如: $.name 或 $.features[0]">
                            </div>
                            <div class="md:mt-6">
                                <button id="execute-query" class="bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 font-medium">
                                    执行查询
                                </button>
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 p-4 rounded-md font-mono text-sm">
                            <div class="mb-2 text-gray-700">查询结果:</div>
                            <pre id="query-result" class="text-gray-800">1000</pre>
                        </div>
                        
                        <div class="mt-4 text-sm text-gray-600">
                            <p class="font-medium mb-1">常用JSONPath语法:</p>
                            <ul class="pl-4 space-y-1">
                                <li>• <code class="bg-gray-100 px-1">$</code> - 根对象</li>
                                <li>• <code class="bg-gray-100 px-1">$.property</code> - 访问属性</li>
                                <li>• <code class="bg-gray-100 px-1">$['property']</code> - 带引号访问属性</li>
                                <li>• <code class="bg-gray-100 px-1">$.array[0]</code> - 访问数组索引</li>
                                <li>• <code class="bg-gray-100 px-1">$.array[*]</code> - 访问所有数组元素</li>
                                <li>• <code class="bg-gray-100 px-1">$..property</code> - 递归查找所有属性</li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- 错误消息提示区 -->
                    <div id="error-container" class="mb-6 hidden">
                        <div class="bg-red-50 border border-red-200 text-red-800 p-4 rounded-md">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 mt-0.5">
                                    <i class="fas fa-exclamation-circle text-red-500"></i>
                                </div>
                                <div class="ml-3">
                                    <h3 class="font-medium">JSON验证错误</h3>
                                    <div class="mt-2 text-sm" id="error-message">
                                        无效的JSON格式: 在第3行第10列附近发现意外的字符 ']'
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 说明和提示 -->
                    <div class="border-t border-gray-200 pt-6">
                        <h3 class="font-bold text-gray-800 mb-3">使用提示</h3>
                        <div class="text-gray-600 space-y-2">
                            <p>•&nbsp;&nbsp;格式化功能使JSON数据结构更清晰，便于阅读和编辑</p>
                            <p>•&nbsp;&nbsp;验证功能会检查JSON格式是否正确，并指出错误位置</p>
                            <p>•&nbsp;&nbsp;压缩功能可减小JSON文件体积，适合生产环境使用</p>
                            <p>•&nbsp;&nbsp;JSONPath可以快速定位和提取大型JSON中的特定数据</p>
                        </div>
                        
                        <div class="mt-6 bg-blue-50 p-4 rounded-md">
                            <h4 class="font-medium text-blue-800 mb-2">注意事项</h4>
                            <p class="text-blue-700 text-sm">
                                使用本工具处理的数据完全在浏览器端进行，不会上传至服务器，确保数据安全。对于包含敏感信息的JSON数据，请谨慎使用在线工具。
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- 相关工具 -->
                <div class="mt-8">
                    <h3 class="text-xl font-bold text-gray-800 mb-4">相关工具</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                        <a href="{{ url_for('dev_tools.code_formatter') }}" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-purple-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-code text-purple-600 mr-2"></i>
                                    <h3 class="font-bold">代码格式化</h3>
                                </div>
                                <p class="text-gray-600 text-sm">格式化并美化各种编程语言代码</p>
                            </div>
                        </a>
                        
                        <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-purple-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-exchange-alt text-purple-600 mr-2"></i>
                                    <h3 class="font-bold">XML-JSON转换</h3>
                                </div>
                                <p class="text-gray-600 text-sm">在XML和JSON格式间相互转换</p>
                            </div>
                        </a>
                        
                        <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-purple-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-table text-purple-600 mr-2"></i>
                                    <h3 class="font-bold">CSV-JSON转换</h3>
                                </div>
                                <p class="text-gray-600 text-sm">在CSV和JSON格式间相互转换</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 计算字符数
        const jsonInput = document.querySelector('textarea[name="json_input"]');
        const charCount = document.getElementById('char-count');
        
        function updateCharCount() {
            charCount.textContent = jsonInput.value.length;
        }
        
        jsonInput.addEventListener('input', updateCharCount);
        
        // 清空按钮
        const clearButton = document.getElementById('clear-input');
        clearButton.addEventListener('click', function() {
            jsonInput.value = '';
            updateCharCount();
        });
        
        // 验证JSON按钮
        const validateButton = document.getElementById('validate-json');
        const errorContainer = document.getElementById('error-container');
        const errorMessage = document.getElementById('error-message');
        
        validateButton.addEventListener('click', function() {
            try {
                JSON.parse(jsonInput.value);
                errorContainer.classList.add('hidden');
                
                // 显示成功消息
                alert('JSON格式有效！');
            } catch (error) {
                errorContainer.classList.remove('hidden');
                errorMessage.textContent = '无效的JSON格式: ' + error.message;
            }
        });
        
        // 复制按钮
        const copyButton = document.getElementById('copy-result');
        const resultText = document.getElementById('result');
        
        copyButton.addEventListener('click', function() {
            const textToCopy = resultText.textContent;
            navigator.clipboard.writeText(textToCopy).then(function() {
                alert('JSON已复制到剪贴板');
            }, function() {
                alert('复制失败，请手动复制');
            });
        });
        
        // 下载按钮
        const downloadButton = document.getElementById('download-result');
        
        downloadButton.addEventListener('click', function() {
            const textToDownload = resultText.textContent;
            const blob = new Blob([textToDownload], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            
            const a = document.createElement('a');
            a.href = url;
            a.download = '格式化JSON.json';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });
        
        // JSONPath查询
        const executeQueryButton = document.getElementById('execute-query');
        const jsonpathQuery = document.getElementById('jsonpath-query');
        const queryResult = document.getElementById('query-result');
        
        executeQueryButton.addEventListener('click', function() {
            try {
                const jsonData = JSON.parse(jsonInput.value);
                const path = jsonpathQuery.value;
                
                // 这里是一个简化的JSONPath解析，实际应用中应使用专门的JSONPath库
                let result;
                if (path === '$') {
                    result = jsonData;
                } else if (path.startsWith('$.')) {
                    const parts = path.substring(2).split('.');
                    result = jsonData;
                    
                    for (const part of parts) {
                        if (part.includes('[') && part.includes(']')) {
                            const propName = part.substring(0, part.indexOf('['));
                            const index = parseInt(part.substring(part.indexOf('[') + 1, part.indexOf(']')));
                            
                            if (propName) {
                                result = result[propName][index];
                            } else {
                                result = result[index];
                            }
                        } else {
                            result = result[part];
                        }
                    }
                }
                
                queryResult.textContent = JSON.stringify(result, null, 2);
            } catch (error) {
                queryResult.textContent = '查询错误: ' + error.message;
            }
        });
        
        // 转换为YAML按钮 - 实际应用中需要引入专门的库
        const convertToYamlButton = document.getElementById('convert-to-yaml');
        
        convertToYamlButton.addEventListener('click', function() {
            alert('此功能需要引入专门的YAML转换库，请在完整实现中添加');
        });
    });
</script>
{% endblock %} 